import { Fragment, defineComponent, reactive } from 'vue';
import { menuPage, tools, arrow, arrowRotate, touchTips, searchWrap, icon, tips, iconWrap, title, item, iconList } from './Menu.module.scss';
import { map, poi } from '@/store';
import arrowImg from '@/assets/img/menu/arrow.png';
import searchIcon from '@/assets/img/menu/icon-search.png';
import { poiTypeInterface } from '@/utils/type';

/*
---底部伸缩菜单文件
---重构：9
*/
export const menuObj = reactive({
    isShowTools: true,
})
export default defineComponent({
    name: 'Menu',
    methods: {
        infoControl() {
            menuObj.isShowTools = !menuObj.isShowTools;
        },
        goSearch() {
            poi.infoType = "";
            map.curPageType = "search";
            map.searchFlag=true;
            map.menuFlag=false;
        },
        goList(categoryId: number) {
            poi.infoType = "";
            poi.requestPoiList(categoryId);
        },
    },
    render() {
        return <Fragment>
            <div class={menuPage} v-show={map.menuFlag}>
                <div class={tools}>
                    <div class={touchTips} onClick={this.infoControl}>
                        <img class={`${arrow} ${menuObj.isShowTools ? '' : arrowRotate}`} src={arrowImg} />
                    </div>
                    <div
                        class={searchWrap}
                        onClick={this.goSearch}
                        style={{ marginBottom: `${menuObj.isShowTools ? '' : '20px'}` }}
                    >
                        <img class={icon} src={searchIcon} alt="图片找不到" />
                        <span class={tips}>查找室内地点</span>
                    </div>
                    <div v-show={menuObj.isShowTools} class={iconList}>
                        {
                            menuObj.isShowTools ? poi.typeList?.map((p: poiTypeInterface) => {
                                return <div class={iconWrap} onClick={() => this.goList(p.categoryId)}>
                                    {p.status == '1' && <div class={item}>
                                        <img src={p.image} class={icon} alt="图片找不到" />
                                        <span class={title}>{p.name}</span>
                                    </div>}
                                </div>
                            }) : null
                        }
                    </div>
                </div>
            </div>
        </Fragment>;
    },
});